<template>
  <div class="login-container">
    <!-- <van-nav-bar
      style="background-color: #fff;"
      title="劳务派遣信息查询"
      left-arrow
      left-text="x"
      @click-left="$router.go(-1)"
    /> -->
    <div class="main-box">
      <div class="title-box">
        <h3>劳务派遣监管专户数字信息化平台</h3>
        <p>(派遣人员登录后可查询工资发放信息及社保信息)</p>
      </div>
      <van-form @failed="onFailed" @submit="onSubmit">
        <div class="input-box">
          <van-cell-group>
            <van-field
              v-model="idCard"
              clearable
              label="账号："
              placeholder="请输入身份证号"
              :rules="[{ validator: validatorIdCard, message: '请填写正确的身份证号' }]"
            />
            <van-field
              v-model="password"
              type="password"
              clearable
              label="密码："
              placeholder="请输入登录密码"
              :rules="[{ validator: validatorPassword, message: '密码采用8位以上且大小写字符数字和特殊字符搭配的方式' }]"
            />
            <div class="code-image-box">
              <van-field
                v-model="code"
                center
                clearable
                label="验证码"
                placeholder="请输入图形验证码"
                :rules="[{ required: true, message: '请输入图形验证码' }]"
                class="btn-code"
              >
              </van-field>
              <div class="code-box" @click="getCodeImage">
                <img :src="codeUrl" style="height: 0.885rem; width: 1.6rem; margin: -1px;"/>
              </div>
            </div>
          </van-cell-group>
        </div>
        <div style="margin-top: 30px;">
          <van-button style="width: 90%;" type="info">登 录</van-button>
        </div>
      </van-form>
      <div class="operation-box">
        <div class="forget-register-box">
          <div class="forget">
            <span @click.prevent="toForgetPasswordPage">忘记密码</span>
          </div> |
          <div class="register">
            <span @click.prevent="toRegisterPage">没有账号？马上注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Crypto from '@/utils/crypto.js'
import { codeImage } from '@/api/common.js'
export default {
  name: 'login',
  data () {
    return {
      form: {
        idCard: ''
      },
      codeUrl: '', // 验证码路径
      idCard: '', // 身份证号
      password: '', // 密码
      // idCard: '110101199005079159',
      // password: 'Ahd#15888!',
      uuid: '', // 验证码的uuid
      phone: '', // 手机号
      code: '' // 回传登录的验证码值
    }
  },
  created () {
    this.getCodeImage()
  },
  methods: {
    // 成功校验个人信息
    onSubmit () {
      this.login()
    },
    // 失败校验个人信息
    onFailed () {
      this.$toast('请先将登录信息填写完整！')
      // localStorage.setItem('myIdCard', Crypto.encrypt(this.idCard, this.aesKey, this.aesKeyIv))
      this.$store.dispatch('testLogin', {
        idCard: Crypto.encrypt('445381199808097511', this.aesKey, this.aesKeyIv),
        password: Crypto.encrypt('this.password', this.aesKey, this.aesKeyIv),
        code: this.code,
        uuid: this.uuid
      })
      this.$router.push('/index')
      this.$toast('登录成功！')
    },
    // 获取验证码
    getCodeImage () {
      codeImage().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.uuid = res.uuid
      })
    },
    // 校验身份证号
    validatorIdCard (val) {
      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)
    },
    // 校验密码
    validatorPassword (val) {
      return /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/.test(val)
    },
    // 用户登录
    async login () {
      await this.$store.dispatch('Login', {
        idCard: Crypto.encrypt(this.idCard, this.aesKey, this.aesKeyIv),
        password: Crypto.encrypt(this.password, this.aesKey, this.aesKeyIv),
        code: this.code,
        uuid: this.uuid
      }).then(res => {
        if (res.code === 200) {
          this.$router.push('/index')
          this.$toast('登录成功！')
        } else if (res.code === 500) {
          this.$toast(res.msg)
          this.getCodeImage()
        }
      })
    },
    // 前往注册页面
    toRegisterPage () {
      this.$router.push('/register')
    },
    // 前往忘记密码重置密码页面
    toForgetPasswordPage () {
      this.$router.push('/forgetPassword')
    }
  }
}
</script>

<style scoped lang="less">
.login-container{
  min-height: 100vh;
  background-color: #f8f8f8;
  .main-box{
    height: 170px;
    width: 100%;
    text-align: center;
    background: linear-gradient(to right,#0f72fd, #36bffd);
    .title-box{
      height: 70px;
      padding-top: 35px;
      font-size: 12px;
      h3{
        color: #fff;
        line-height: 35px;
        font-size: 20px;
      }
      p{
        line-height: 25px;
        color: #bfddfc;
      }
    }
    .input-box{
      width: 90%;
      margin: 10px auto;
      border-radius: 5px;
      padding: 5px;
      background-color: #fff;
      .code-image-box{
        position: relative;
        .code-box{
          position: absolute;
          top: 50%;
          transform: translateY(-45%);
          right: 10px;
        }
      }
    }
    .operation-box{
      background-color: #f8f8f8;
      margin-top: 50px;
      .forget-register-box{
        display: flex;
        margin-top: 20px;
        font-size: 14px;
        color: #5f93ed;
      }
      .forget{
        flex: 40%;
        text-align: right;
        margin-right: 15px;
        cursor: pointer;
      }
      .register{
        flex: 60%;
        text-align: left;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
}
</style>
